﻿
@{
    ViewBag.Title = "ShoppingCart";
    Layout = "~/Views/_GmShopPage.cshtml";
}

<link href="~/Content/ShoppingCartCss.css" rel="stylesheet" />
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2594013_poqnh9nvna9.css">
<div  id="app">
    <div id="shopcarTop">
        <div style="min-width: 200px;">
            <div></div>
            <span>我的购物车</span>
        </div>
        <span style="min-width: 180px;">全场运费一律<b>2</b>元</span>
        <span style="min-width: 180px;" id="Calculator">简易计算器</span>
    </div>
    <div class="Column">
        <div>
            <i class="iconfont icon-shou" style="font-size: 30px;"></i>
        </div>
        <div style="min-width: 300px;"><span>确认商品价格与交易条件</span></div>
        <div style="min-width: 0%;width: 70%;height: 100%;"></div>
        <div>
            <i id="shopcarimg" class="iconfont icon-gouwucheman;"></i>
        </div>
    </div>
    <div id="shopCarList">
        <table border="0" class="table">
            <thead>
                <tr>
                    <td>商品名</td>
                    <td>原价</td>
                    <td>优惠价</td>
                    <td>打折</td>
                    <td>数量</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>

                <tr class="ShopInfo" v-for="index in ShoppingCart" v-bind:id="index.Id">
                    <td>
                        <span>{{index.CommodityName}}</span>
                    </td>
                    <td>
                        ¥<span class="OldMoney">{{index.Unit}}</span>
                    </td>
                    <td>
                        ¥<span class="NewMoney">{{index.Unit}}</span>
                    </td>
                    <td>
                        <span>10折</span>
                    </td>
                    <td>
                        <input type="text" v-bind:value="index.AddCount" />
                    </td>
                    <td>
                        <button id="DeleteBut">删除</button>
                    </td>
                </tr>


            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">继续挑选商品</td>
                    <td>总价:¥<span></span></td>
                    <td>节省:¥<span></span></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="Column">
        <div>
            <i class="iconfont icon-shou" style="font-size: 30px;"></i>
        </div>
        <div style="min-width: 370px;"><span>补充您的邮件地址和联系人基本信息</span></div>
        <div style="min-width: 0%;width: 60%;height: 100%;"></div>
        <div>
            <i id="shopcarimg" class="iconfont icon-gouwucheman;"></i>
        </div>
    </div>
    <div id="ReceiptPath">
        <table>
            <tr>
                <td>收件人:</td>
                <td><input id="userName" type="text" /></td>
            </tr>
            <tr>
                <td>电话:</td>
                <td><input id="Phone" type="text" /></td>
            </tr>
            <tr>
                <td>地址:</td>
                <td>
                    <select id="Province" v-model="Province" class="SelectChange">
                        <option v-for="index in provinceList" :value="index.area_name" >{{index.area_name}}</option>
                    </select>
                    <select id="City" v-model="City">
                        <option v-for="index in cityList">{{index.area_name}}</option>
                    </select>
                    <input id="path" type="text" />
                </td>
            </tr>
        </table>
        <button id="submitBut" class="windowsHomeGetBut">提交</button>
    </div>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/ShoppingCartJs.js"></script>
